<route lang="jsonc" type="page">
{
"style": {
"navigationBarTitleText": "美图解压",
"navigationBarBackgroundColor": "#ff6b6b",
"navigationBarTextStyle": "white"
}
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'ImageRelax',
})

// 精美图片数据
const beautifulImages = ref([
  {
    id: 1,
    title: '樱花飘落',
    url: 'https://images.unsplash.com/photo-1522383225653-ed111181a951?w=400',
    category: '自然风景',
    description: '春日樱花，粉色花瓣轻舞飞扬',
  },
  {
    id: 2,
    title: '静谧湖水',
    url: 'https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=400',
    category: '自然风景',
    description: '湖光山色，宁静致远',
  },
  {
    id: 3,
    title: '云海奇观',
    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
    category: '自然风景',
    description: '云海翻腾，壮观美丽',
  },
  {
    id: 4,
    title: '向日葵田',
    url: 'https://images.unsplash.com/photo-1470058869958-2a77ade41c02?w=400',
    category: '自然风景',
    description: '金黄向日葵，阳光温暖',
  },
  {
    id: 5,
    title: '可爱小猫',
    url: 'https://images.unsplash.com/photo-1574158622682-e40e69881006?w=400',
    category: '萌宠动物',
    description: '毛茸茸的小猫咪，治愈系萌宠',
  },
  {
    id: 6,
    title: '彩虹天空',
    url: 'https://images.unsplash.com/photo-1419833479618-c595710d65b4?w=400',
    category: '自然风景',
    description: '雨后彩虹，充满希望',
  },
])

// 当前选中的图片
const currentImage = ref(null)

// 显示图片详情
function showImageDetail(image: any) {
  currentImage.value = image
}

// 关闭图片详情
function closeImageDetail() {
  currentImage.value = null
}

// 分享图片
function shareImage(image: any) {
  uni.showShareMenu({
    withShareTicket: true,
    title: image.title,
    path: `/pages/relax/image/index?imageId=${image.id}`,
  })
}

// 收藏图片
function favoriteImage(image: any) {
  uni.showToast({
    title: '已收藏',
    icon: 'success',
  })
}
</script>

<template>
  <view class="image-relax-container">
    <!-- 顶部说明 -->
    <view class="header-section">
      <view class="header-title">
        美图解压
      </view>
      <view class="header-desc">
        欣赏美丽的图片，让心情放松下来
      </view>
    </view>

    <!-- 图片网格 -->
    <view class="image-grid">
      <view
        v-for="image in beautifulImages"
        :key="image.id"
        class="image-card"
        @click="showImageDetail(image)"
      >
        <image
          :src="image.url"
          mode="aspectFill"
          class="image-item"
          :lazy-load="true"
        />
        <view class="image-overlay">
          <view class="image-title">
            {{ image.title }}
          </view>
          <view class="image-category">
            {{ image.category }}
          </view>
        </view>
      </view>
    </view>

    <!-- 图片详情弹窗 -->
    <view v-if="currentImage" class="image-modal" @click="closeImageDetail">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <view class="modal-title">
            {{ currentImage.title }}
          </view>
          <view class="modal-close" @click="closeImageDetail">
            ×
          </view>
        </view>
        <view class="modal-image-container">
          <image
            :src="currentImage.url"
            mode="aspectFit"
            class="modal-image"
          />
        </view>
        <view class="modal-info">
          <view class="image-description">
            {{ currentImage.description }}
          </view>
          <view class="image-actions">
            <button
              class="action-btn favorite-btn"
              @click="favoriteImage(currentImage)"
            >
              <view class="i-mdi-heart" />
              <text>收藏</text>
            </button>
            <button
              class="action-btn share-btn"
              @click="shareImage(currentImage)"
            >
              <view class="i-mdi-share-variant" />
              <text>分享</text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.image-relax-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

// 顶部区域
.header-section {
  text-align: center;
  padding: 40rpx 30rpx;
  color: #fff;
}

.header-title {
  font-size: 44rpx;
  font-weight: 700;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.header-desc {
  font-size: 28rpx;
  opacity: 0.9;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

// 图片网格
.image-grid {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.image-card {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
  }
}

.image-item {
  width: 100%;
  height: 300rpx;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  padding: 40rpx 20rpx 20rpx;
}

.image-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.image-category {
  font-size: 22rpx;
  opacity: 0.8;
}

// 图片详情弹窗
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 90%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  max-height: 80vh;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;

  &:hover {
    color: #333;
  }
}

.modal-image-container {
  max-height: 60vh;
  overflow: hidden;
}

.modal-image {
  width: 100%;
  height: auto;
}

.modal-info {
  padding: 30rpx;
}

.image-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.image-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;

  &.favorite-btn {
    background: #ff6b6b;
    color: #fff;

    &:active {
      background: #ff5252;
    }
  }

  &.share-btn {
    background: #f5f5f5;
    color: #666;

    &:active {
      background: #e9ecef;
    }
  }
}

// 响应式适配
@media screen and (min-width: 768rpx) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
